<template>
	<view class="body">
		<view class="item d-b-c bg-white p30 line">
			<view class="name sub"><text class="red mr10">*</text>标题</view>
			<view class="ww100 tr f28">
				<input type="text" placeholder="请填写任务标题" />
			</view>
		</view>
		<view class="item d-b-c bg-white p30 line">
			<view class="name sub"><text class="red mr10">*</text>负责人</view>
			<view class="tr f28">
				<picker mode="selector" :value="data.fIndex" :range="data.zxr" @change="setPic('fIndex',$event)">
					<view class="d-b-c">
						<view class="mr10" v-if="data.fIndex!=-1">{{data.zxr[data.fIndex]}}</view>
						<view class="sub mr10" v-else>请选择负责人</view>
						<up-icon name="arrow-right"></up-icon>
					</view>
				</picker>
			</view>
		</view>
		<view class="item d-b-c bg-white p30 line">
			<view class="name sub"><text class="red mr10">*</text>执行人</view>
			<view class="tr f28">
				<picker mode="selector" :value="data.zIndex" :range="data.zxr" @change="setPic('zIndex',$event)">
					<view class="d-b-c">
						<view class="mr10" v-if="data.zIndex!=-1">{{data.zxr[data.zIndex]}}</view>
						<view class="sub mr10" v-else>请选择执行人</view>
						<up-icon name="arrow-right"></up-icon>
					</view>
				</picker>
			</view>
		</view>
		<view class="item d-b-c bg-white p30 line mt40">
			<view class="name sub"><text class="red mr10">*</text>开始时间</view>
			<view class="tr f28">
				<view class="d-b-c" @click="setTime('showAdd',true)">
					<up-datetime-picker @close='closeTime()' @cancel="closeTime()" :minDate="new Date().getTime()"
						:show="data.showAdd" v-model="data.addTime" mode="datetime"
						@confirm="changeTime('addTime',$event)"></up-datetime-picker>
					<view class="mr10" v-if="data.addTime">{{data.addTime}}</view>
					<view class="sub mr10" v-else>请选择开始时间</view>
					<up-icon name="arrow-right"></up-icon>
				</view>
			</view>
		</view>
		<view class="item d-b-c bg-white p30 line">
			<view class="name sub"><text class="red mr10">*</text>结束时间</view>
			<view class="tr f28">
				<view class="d-b-c" @click="setTime('showEnd',true)">
					<up-datetime-picker @close='closeTime()' @cancel="closeTime()" :minDate="new Date().getTime()"
						:show="data.showEnd" v-model="data.endTime" mode="datetime"
						@confirm="changeTime('endTime',$event)"></up-datetime-picker>
					<view class="mr10" v-if="data.endTime">{{data.endTime}}</view>
					<view class="sub mr10" v-else>请选结束始时间</view>
					<up-icon name="arrow-right"></up-icon>
				</view>
			</view>
		</view>
		<view class="item d-b-c bg-white p30 line mt40">
			<view class="name sub"><text class="red mr10">*</text>抄送人</view>
			<view class="tr f28">
				<picker mode="selector" :value="data.cIndex" :range="data.zxr" @change="setPic('cIndex',$event)">
					<view class="d-b-c">
						<view class="mr10" v-if="data.cIndex!=-1">{{data.zxr[data.cIndex]}}</view>
						<view class="sub mr10" v-else>请选择抄送人</view>
						<up-icon name="arrow-right"></up-icon>
					</view>
				</picker>
			</view>
		</view>
		<view class="item d-s-s bg-white p30 line mt40 d-c">
			<view class="name sub">附件</view>
			<view class="upload mt20">
				<up-upload :fileList="data.file" accept='file' @afterRead="afterRead" @delete="deletePic"
					:maxCount="9"></up-upload>
			</view>
		</view>
		<view class="item d-s-s d-c bg-white p30 line">
			<view class="name sub">备注</view>
			<view class="ww100 f28 mt20">
				<textarea class="ww100" placeholder="添加备注"></textarea>
			</view>
		</view>
		<view class="p30 bg-white mt40">
			<up-button text="提交" color="#1379e5" shape="circle"></up-button>
		</view>
	</view>
</template>
<script setup>
	import { reactive } from 'vue'
	import { onLoad } from "@dcloudio/uni-app";
	import { useStore } from "vuex"
	import { timeFormat } from '@/uni_modules/uview-plus';
	const store = useStore()
	const data = reactive({
		zxr: ['黑马青年', '张三', '李四'],
		zIndex: -1,
		fIndex: -1,
		cIndex: -1,
		addTime: "",
		showAdd: false,
		endTime: "",
		showEnd: false,
		file: []
	})
	async function afterRead(e) {
		data.file.push(e.file)
		console.log(data.file);
	}

	function deletePic(e) {
		data.file.splice(e.index, 1);
	}

	function setTime(name, bool) {
		data[name] = bool
	}

	function changeTime(name, e) {
		data[name] = timeFormat(e.value, 'yyyy-mm-dd hh:MM')
		closeTime()
	}

	function closeTime() {
		data.showAdd = false
		data.showEnd = false
	}

	function setPic(name, e) {
		data[name] = e.detail.value
	}
	onLoad(() => {})
</script>
<style scoped lang="scss">
	.name {
		width: 5em;
	}
</style>